<template>
  <div class="com-container"
       @dblclick="revertMap">
    <div class="com-chart"
         ref="mapRef">

    </div>
  </div>
</template>

<script>
import { getChinaMapData, getProvinceMapData } from 'network/localMap.js';
import { getMapData } from 'network/map.js';

import { getProvinceMapInfo } from 'utils/map_utils.js';
export default {
  name: 'Map',
  data () {
    return {
      echartsInstance: null,
      allData: null, //服务器返回的数据
      provinceData: {}, //所获取的省份地图矢量数据
      currentType: 'china', //当前展示的地图类型 china为中国地图 province为省份地图
    }
  },
  mounted () {
    this.initChart();
    this.getData();
    this.adaptScreen();
    window.addEventListener('resize', this.adaptScreen);
  },
  destroyed () {
    window.removeEventListener('resize', this.adaptScreen);
  },
  methods: {
    //初始化echarts实例化对象
    async initChart () {
      this.echartsInstance = this.$echarts.init(this.$refs.mapRef, 'chalk');
      //获取中国地图的矢量数据
      const res = await getChinaMapData();
      //console.log(res);
      //注册地图的数据
      this.$echarts.registerMap('china', res.data);
      //对图表初始化配置的控制
      const initOption = {
        geo: {
          type: 'map',
          map: 'china', //注册地图的名称
          top: '5%',
          bottom: '5%',
          itemStyle: {
            areaColor: '#2e72bf',
            borderColor: '#333'
          }
        },
        title: {
          text: '▎商家分布',
          left: 20,
          top: 20,
        },
        legend: {
          left: '5%',
          bottom: '5%',
          orient: 'vertical', //图例列表的布局朝向
        }
      };
      this.echartsInstance.setOption(initOption);

      this.mapClick();
    },

    //获取服务器的数据
    async getData () {
      const res = await getMapData();
      this.allData = res.data;
      console.log(this.allData);
      this.updateChart();
    },

    //更新图表
    updateChart () {
      //图例数据
      const legendArr = this.allData.map(item => {
        return item.name;
      })
      const seriesArr = this.allData.map(item => {
        return {
          type: 'effectScatter',
          name: item.name,
          data: item.children,
          coordinateSystem: 'geo', //在地图中使用散点的数据
          rippleEffect: { //涟漪特效相关配置
            scale: 5, //动画中波纹的最大缩放比例
            brushType: 'stroke', //波纹的绘制方式
          }
        }
      })
      const dataOption = {
        series: seriesArr,
        legend: {
          data: legendArr
        }
      };
      this.echartsInstance.setOption(dataOption);

    },

    //浏览器窗口发生变化，调用
    adaptScreen () {
      const titleFontSize = this.$refs.mapRef.offsetWidth / 100 * 3.6;
      //和分辨率大小相关的配置项
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize,
          },
        },
        legend: {
          itemWidth: titleFontSize / 1.5,
          itemHeight: titleFontSize / 1.5,
          itemGap: titleFontSize / 1.5,
          textStyle: {
            fontSize: titleFontSize / 1.5
          }
        }
      };
      this.echartsInstance.setOption(adapterOption);
      this.echartsInstance.resize();
    },

    //地图点击时触发
    mapClick () {
      //如果当前地图为中国地图
      this.echartsInstance.on('click', async arg => {
        //如果当前地图为省份地图，直接return
        if (this.currentType === 'province') return;
        //获取对应省份名字的拼音和json数据路径
        const provinceInfo = getProvinceMapInfo(arg.name);
        //console.log(provinceInfo);

        //如果省份地图数据没有被储存
        if (!this.provinceData[provinceInfo.key]) {
          //获取省份地图的矢量数据
          const { data: res } = await getProvinceMapData(provinceInfo.path);
          this.provinceData[provinceInfo.key] = res;
          this.$echarts.registerMap(provinceInfo.key, res);
        }
        const changeOption = {
          geo: {
            map: provinceInfo.key
          }
        }
        this.echartsInstance.setOption(changeOption);

        //当前展示的地图为省份地图
        this.currentType = 'province';
      })
    },

    //回到中国地图
    revertMap () {
      //如果当前展示的地图为省份地图
      if (this.currentType === 'province') {
        const revertOption = {
          geo: {
            map: 'china'
          }
        }
        this.echartsInstance.setOption(revertOption);
        this.currentType = 'china';
      }
    }


  },
}
</script>

<style lang="less" scoped>
</style>